<template>
    <el-container>
        <el-header>Header</el-header>
        <el-container>
            <el-aside style="overflow:hidden">
                <el-row class="tac">
                    <el-col :span="24">
                        <el-menu class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
                            background-color="rgb(30 34 45)" text-color="#fff" router active-text-color="#ffd04b">
                            <!-- 嵌套路由 一级 -->
                            <div v-for="(item, index) in routerData" :key="index + '-onl'">
                                <!-- 判断有子级并且hidden为展示状态 -->
                                <el-submenu v-if="item.hidden && item.children" :index="item.path">
                                    <template slot="title">
                                        <i class="el-icon-location"></i>
                                        <span>{{ item.meta.title }}</span>
                                    </template>
                                    <!-- 二级 -->
                                    <div v-for="(its, indexs) in item.children" :key="indexs + '-on'">
                                        <el-menu-item v-if="its.hidden && !its.children"
                                            :index="'/menu' + '/' + item.path + '/' + its.path">
                                            <span slot="title">{{ its.meta.title }}</span>
                                        </el-menu-item>
                                    </div>
                                </el-submenu>
                            </div>
                            <!-- 单 一级 -->
                            <div v-for="(item, index) in routerData" :key="index + ''">
                                <!-- 判断没有子级并且hidden为展示状态 -->
                                <el-menu-item v-if="item.hidden && !item.children" :index="'/menu' + '/' + item.path">
                                    <i class="el-icon-menu"></i>
                                    <span slot="title">{{ item.meta.title }}</span>
                                </el-menu-item>
                            </div>
                            
                        </el-menu>

                    </el-col>
                </el-row>
            </el-aside>
            <el-main>
                <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
export default {
    methods: {
        handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        }
    },
    data() {
        return {
            routerData: {}
        }
    },
    mounted() {
        for (let i = 0; i < this.$router.options.routes.length; i++) {
            if (this.$router.options.routes[i].path == '/menu') {
                this.routerData = this.$router.options.routes[i].children;
            }
        }
    }
}

</script>

<style>
body{
    background:#fafafb
}
.el-container .el-main{
    background: #fff!important;
    margin: 20px;
}
</style>